<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		/* flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 */
		.contain {
			background-color: antiquewhite;
			display: flex;
		}

		/* 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
			如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 */
	</style>
</head>

<body>
	<div class="contain">
		<div style="width: 100px; height: 100px; background-color: #6495ED; flex-grow: 2;">1</div>
		<div style="width: 100px; height: 200px; background-color: #ADFF2F; flex-grow: 2;">2</div>
		<div style="width: 100px; height: 300px;background-color: #B8860B;flex-grow: 2">3</div>
		<div style="width: 100px; height: 400px; background-color: #FFF0F5;flex-grow: 3">4</div>
	</div>
</body>

</html>